<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<div class="setp_top">
	<div class="setp_top_btn">
		&nbsp;<input type="button" onclick="return validateForm()" class="btn_ok" />
		<s:if test="#request.isCreate != 1">
			<input type="button" class="btn_cancel" onclick="prevStep()" />
		</s:if>
	</div>
	<s:property value="#typeTxt"/>&nbsp;<s:property value="#workStatusTxt"/>
</div>
<div class="setp_main">
	<table class="table" cellpadding="0" cellspacing="0">
		<tr class="title"><td><span class="stress">*</span>&nbsp;订单号：</td></tr>
		<tr>
			<td>
				<span style="font-size:22px;float: left;line-height: 43px"><s:property value="work.company.prefix"/>&nbsp;</span>
				<input type="text" id="workCode" name="work.workCode" value="<s:property value="work.workCode" />" v_tips="notnull" style="width: 177px;" />
			</td>
		</tr>
		<tr class="title"><td><span class="stress">*</span>&nbsp;委托时间：</td></tr>
		<tr>
			<td>
				<input type="text" id="delegateTime" name="work.delegateTime" value="<s:date name="work.delegateTime" format="yyyy-MM-dd" />" class="calendar" onclick="WdatePicker()"/>
			</td>
		</tr>
		<tr class="title"><td><span class="stress">*</span>&nbsp;委托方：</td></tr>
		<tr>
			<td>
				<input type="text" id="client1" name="client1" value="<s:property value="work.client1.nickname"/>" 
					onkeyup="seachDataByKeyword('searchEmployeeBykeyword.action?type=1',this.value,'client1','client1Id',0,235);"/>
				<a href="javascript:addEmployee('client1')" title="添加访客" class="add_btn">&nbsp;</a>
				<input type="hidden" id="client1Id" name="work.client1.id" value="<s:property value="work.client1.id"/>" />
			</td>
		</tr>
		<tr class="title"><td onclick="ale()">&nbsp;&nbsp;第二委托方：</td></tr>
		<tr>
			<td>
				<input type="text" id="client2" name="client2" value="<s:property value="work.client2.nickname"/>"
					onkeyup="seachDataByKeyword('searchEmployeeBykeyword.action?type=1',this.value,'client2','client2Id',0,235);"/>
				<a href="javascript:addEmployee('client2')" title="添加访客" class="add_btn">&nbsp;</a>
				<input type="hidden" id="client2Id" name="work.client2.id" value="<s:property value="work.client2.id"/>" />
			</td>
		</tr>
		<tr class="title"><td>&nbsp;&nbsp;标签：</td></tr>
		<tr>
			<td class="tag_td" >
				<input type="hidden" id="tags" name="work.tags" value="<s:property value="work.tags" />">
				<select id="tagList" onchange="isAddTag(this.selectedIndex)">
					<option>请选择</option>
					<s:iterator value="#request.tagList">
						<option value="<s:property value="id" />" bgColor="<s:property value="backcolor" />" color="<s:property value="frontcolor" />"><s:property value="name" /></option>
					</s:iterator>
				</select>
				<a href="javascript:" id="addTag" class="add_btn" onclick="showTagList()" style="margin-left: 0; display: block; float: left;">&nbsp;</a>
			</td>
		</tr>
	</table>
</div>
<script>
	var preErrorId = [];
	function validateForm(){
		var errorId = [];
		var errorMsg = '';
		if($('#workCode').val().trim().length == 0){
			errorId[errorId.length] = 'workCode';
		}
		if($('#delegateTime').val().trim().length == 0){
			errorId[errorId.length] = 'delegateTime';
		}
		if($('#client1Id').val().trim().length == 0){
			errorId[errorId.length] = 'client1';
		}
		for(i=0; i<preErrorId.length; i++){
			normalCssJNice(preErrorId[i]);
		}
		if($('#client2Id').val().trim().length == 0){
			if($('#client2').val().trim().length > 0){
				errorId[errorId.length] = 'client2';
				errorMsg += '第二委托方不存在\r\n';
			}
			$('#client2Id').val(0);
		}else if($('#client1Id').val().trim().length != 0 && $('#client2Id').val() == $('#client1Id').val()){
			errorId[errorId.length] = 'client2';
			errorMsg += '第一委托方和第二委托方不能相同\r\n';
		}
		if(errorId.length > 0){
			preErrorId = errorId;
			for(i=0; i<errorId.length; i++){
				errorCssJNice(errorId[i]);
			}
			if(errorMsg != ''){
				alert(errorMsg)
			}
			return;
		}
		
		var params = $("#workForm").serialize();
		$.post('cts/workStep1?save=true',params,function(result){
			if(result == 0 || isNaN(result)){
				alert('保存失败');
			}else if(result == -1){
				errorCssJNice('workCode');
				alert('该订单号已存在');
			}else if(result == -2){
				alert('您没有权限创建订单');
			}else{
				if($('#workId').val() == ''){
					$('#workId').val(result);
					$('.div_left .step').each(function(){
						this.href = this.href.replaceAll('&workId=','&workId='+result);
					})
				}
				nextStep();
			}
		})
	}
	//显示添加标签下拉列表
	function showTagList(){
		$('#tagList').parent('.jNiceWrapper').css('display','block');
		$('#tagList').hide();
		$('#tagList').siblings('.jNiceSelectWrapper').find('a[index=0]')[0].click();
		$('#addTag').hide();
	}
	//判断是否标签添加过了
	function isAddTag(index){
		if(index == 0) return;
		var tagList = $('#tagList').get(0);
		var option = tagList.options[index];
		if($('#tags').val().indexOf(','+option.value+',') != -1){
			var count = 1;
			var tid = setInterval(function(){
				if($('#tag_div'+option.value).css('visibility') != 'hidden'){
					$('#tag_div'+option.value).css({'visibility':'hidden'})
				}else{
					$('#tag_div'+option.value).css({'visibility':'visible'})
				}
				count++
				if(count > 4){
					$('#tag_div'+option.value).css({'visibility':'visible'});
					clearInterval(tid);
				}
			},300)
		
			$('#tag_div'+option.value).css({'visibility':'hidden'}).delay(500)
				.css({'visibility':'visible'}).delay(500).css({'visibility':'hidden'}).delay(300)
				.css({'visibility':'visible'})
			return;
		}
		addTag(index)
	}
	
	//添加标签
	function addTag(index){
		var tagList = $('#tagList').get(0);
		var option = tagList.options[index];
		$('#tagList').siblings('.jNiceSelectWrapper').find('li:has(a[index='+index+'])').hide();
		var tagDiv = $("<div id='tag_div"+option.value+"' class='tag_div'>" +
						"<div class='del_tag' onclick='delTag("+option.value+")'>&nbsp;</div>" +
						option.text+"</div>");
		tagDiv.mouseover(function(){
			$(this).find('.del_tag').show();
		}).mouseout(function(){
			$(this).find('.del_tag').hide();
		})
		tagDiv.css({'background-color':'#'+option.getAttribute('bgColor'),'color':'#'+option.getAttribute('color')});
		if($('.tag_div').length == 0){
			$('#tags').after(tagDiv);
		}else{
			$('.tag_div:last').after(tagDiv);
		}
		if($('#tags').val().length == 0){
			$('#tags').val(',');
		}
		$('#tags').val($('#tags').val()+option.value+",");
		$('#tagList').parent('.jNiceWrapper').css('display','none');
		if($('#tagList').siblings('.jNiceSelectWrapper').find('li').length - 1 > $('.tag_div').length){
			$('#addTag').show();
		}else{
			$('#addTag').hide();
		}
	}
	//删除标签
	function delTag(id){
		$('#tags').val($('#tags').val().replaceAll(id+',',''))
		$('#tag_div'+id).remove();
		var options = $('#tagList').get(0).options;
		for(i=0; i<options.length; i++){
			if(options[i].value == id){
				$('#tagList').siblings('.jNiceSelectWrapper').find('li:has(a[index='+i+'])').show();
				break;
			}
		}
		$('#addTag').show();
	}
	//显示已选择的标签
	function showTag(){
		var tags = $('#tags').val().split(',');
		var tag = ',';
		var options = $('#tagList').get(0).options;
		for(i=0; i<tags.length; i++){
			if(tags[i].length == 0 || isNaN(tags[i])){
				continue;
			}
			if($('#tag_div'+tags[i]).length > 0){
				continue;
			}
			tag += tags[i] + ',';
			for(j=0; j<options.length; j++){
				if(options[j].value == tags[i]){
					addTag(j);
					break;
				}
			}
		}
		$('#tags').val(tag);
	}
	$(function(){
		showTag();
	})
</script>
